<template>
  <div id="app">
    <headerView :seller="seller"></headerView>
    <div class="tab border-1px">
      <router-link tag="div" class="tab_item" to="/goods">商品</router-link>
      <router-link tag="div" class="tab_item" to="/ratings">评价</router-link>
      <router-link tag="div" class="tab_item" to="/seller">商家</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import header from "@components/header/header.vue";
import * as base from "./common/const";

export default {
  name: "App",
  data() {
    return {
      seller: {}
    };
  },
  components: {
    headerView: header
  },
  created() {
    this.axios.get(base.API_SELLER).then(res => {
      res = res.data;
      if (res.status == 0) {
        this.seller = res.data;
        console.log("seller", this.seller);
      }
    });
  }
};
</script>
  
<style lang='stylus' rel="stylesheet/stylus" >
@import './common/stylus/mixin.styl';

.tab {
  display: flex;
  height: 40px;
  width: 100%;
  justify-content: center;
}

.border-1px {
  border-1px(rgba(7, 17, 27, 0.1));
}

.tab_item {
  flex: auto;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: rgb(77, 85, 93);
}

.router-link-active {
  color: rgb(240, 20, 20);
}
</style>
